<template>
  <modal :value="value" @on-ok="save" @on-visible-change="visibleChange"
         :draggable="!$config.mask"
         :mask="$config.mask"
         :mask-closable="!$config.mask"
         :width="800"
         class="pandx"
  >
    <p slot="header">
      修改密码：{{ modalData.data.userName }}
    </p>
    <Form ref="form" :model="user" :rules="rules" label-position="top">
      <FormItem :label="adminPasswordLabel" prop="adminPassword">
        <Input v-model="user.adminPassword" :maxlength="1024" placeholder="" type="password"></Input>
      </FormItem>
      <FormItem label="新密码" prop="newPassword">
        <Input ref="password" v-model="user.newPassword" :maxlength="1024" placeholder="" type="password"></Input>
      </FormItem>
      <FormItem label="确认密码" prop="confirmPassword">
        <Input v-model="user.confirmPassword" :maxlength="1024" placeholder="" type="password"></Input>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button @click="cancel" icon="md-close">取消</Button>
      <Button @click="save" type="primary" icon="md-checkmark">确定</Button>
    </div>
  </modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';

@Component({
  components: {},
})
export default class PasswordModal extends AbpBase {
  name: string = 'PasswordModal';

  @Prop({type: Boolean, default: false}) value: boolean;
  @Prop({type: Object}) modalData: any;

  adminPasswordLabel:string='';
  user: { newPassword: string, confirmPassword: string,adminPassword:string } = {newPassword: '', confirmPassword: '',adminPassword:''};
  rules = {
    adminPassword:[
      {
        required: true,
        message: this.$store.state.session.user.name + '的密码是必须的',
        trigger: 'blur',
      },
      {
        min: 6,
        trigger: 'blur',
        message: this.$store.state.session.user.name + '的密码至少要6位',
      },
    ],
    newPassword: [
      {
        required: true,
        message: '新密码是必须的',
        trigger: 'blur',
      },
      {
        min: 6,
        trigger: 'blur',
        message: '新密码至少要6位',
      },
    ],
    confirmPassword: [
      {
        required: true,
        message: '确认密码是必须的',
        trigger: 'blur',
      },
      {
        validator: (rule, value, callback) => {
          if (value !== (this.$refs.password as any).value) {
            callback(new Error('两次输入的密码不一致'));
          } else {
            callback();
          }
        },
        trigger: 'blur',
      },
    ],
  };

  visibleChange(value: boolean) {
    if (!value) {
      this.reset();
      this.$emit('input', value);
    }
  }

  reset() {
    (this.$refs.form as any).resetFields();
    this.user = {newPassword: '', confirmPassword: '',adminPassword:''};
  }

  async save() {
    (this.$refs.form as any).validate(async (valid: boolean) => {
      if (valid) {
        await this.$store.dispatch({
          type: 'user/resetPassword',
          data: {
            userId: this.modalData.data.id,
            newPassword: this.user.newPassword,
            adminPassword:this.user.adminPassword,
          },
        });
        this.$Message.success({
          background: true,
          content: '用户 ' + this.modalData.data.userName + ' 的密码已修改成功',
          duration: this.$config.duration,
        });
        this.$emit('input', false);
      }
    });
  }

  cancel() {
    this.$emit('input', false);
  }

  created(){
    this.adminPasswordLabel= this.$store.state.session.user.name + "的密码"
  }
}
</script>

<style lang="less" scoped>

</style>
